<template>
  <a-modal v-model:visible="codeVisible" title="请输入验证码" centered :maskClosable='false' :closable="false" :footer='null' style="height: 500px;">
    <h1 tabindex="-1" class="tk-intro">
      双重认证
    </h1>
    <VCode :maxlength='6' @onResultCode='onResultCode' />
    <p class="tk-text">
      一条包含验证码的信息已发送至你的手机。输入验证码以继续。
    </p>
  </a-modal>
</template>

<script lang='ts'>
import {  SetupContext } from "vue";
import VCode from "@/components/CerModule/CerUpload/childComponent/VerificationCode/VCode.vue";
export default {
  props: {
    codeVisible: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["onCodeVisible"],
  components: { VCode },
  setup(props: any, ctx: SetupContext<"onCodeVisible"[]>) {

    function onResultCode(code: string) {
      ctx.emit("onCodeVisible", code);
    }
    return {
      onResultCode,
    };
  },
};
</script>
<style lang="less" scoped>
.tk-intro {
  text-align: center;
  font-size: 21px;
  line-height: 1.38105;
  font-weight: 400;
  letter-spacing: 0.011em;
  font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial,
    sans-serif;
}
.tk-text {
  margin: 15px auto;
  width: 60%;
  text-align: center;
}
</style>